<template>
  <div class="app-launcher">
    <div class="header">
      <h3>{{ currentTime }}</h3>
      <div class="search-bar">
        <select v-model="selectedSearchType" @change="handleSearch">
          <option value="baidu">百度</option>
            <option value="google">谷歌</option>
            <option value="bing">必应</option>
            <option value="zhihu">知乎</option>
        </select>
        <img :src="iconSrc" alt="图标" class="baidu-icon"/>
        <div class="search-input">
          <input type="text" :placeholder="placeholderText" v-model="searchQuery" />
          <button @click="performSearch" class="search-button">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="apps" v-if="apps.length">
      <div v-for="(appsInCategory, category) in appsByCategory" :key="category">
        <h3 class="category-title">{{ category }}</h3>
        <div class="app-grid">
          <div
            v-for="(app, index) in appsInCategory"
            :key="index"
            class="app"
            @click="openApp(app.site_url)"
            :title="app.desc"
          >
            <div class="app-info">
              <div class="app-icon" v-if="app.icon">
                <img :src="app.icon" alt="App Icon" />
              </div>
              <div class="app-icon" v-else>
                <img :src="app.image" alt="App Icon" />
              </div>
              <div class="app-name">{{ app.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="no-apps" v-else>
      <p>暂无网址</p>
      </div>
  </div>
</template>

<script setup>

const apps = ref([]);

const searchQuery = ref('');
const selectedSearchType = ref('baidu'); // 默认搜索类型
const currentTime = ref(new Date().toLocaleString());

setInterval(() => {
  currentTime.value = new Date().toLocaleString();
}, 1000);
const fetchLinks = async () => {
  try {
    const response = await axios.get("/api/resources/navigate/");
    apps.value = response.data.results;
  } catch (error) {
    console.error("获取链接数据失败:", error);
  }
};
const appsByCategory = computed(() => {
  const groupedApps = {};
  apps.value.forEach(app => {
    if (!groupedApps[app.category.name]) {
      groupedApps[app.category.name] = [];
    }
    groupedApps[app.category.name].push(app);
  });
  return groupedApps;
});

const performSearch = () => {
  let searchUrl = "";
  const query = encodeURIComponent(searchQuery.value);
  switch (selectedSearchType.value) {
    case "baidu":
      searchUrl = `https://www.baidu.com/s?wd=${query}`;
      break;
    case "google":
      searchUrl = `https://www.google.com/search?q=${query}`;
      break;
    case "bing":
      searchUrl = `https://www.bing.com/search?q=${query}`;
      break;
    case "zhihu":
      searchUrl = `https://www.zhihu.com/search?type=content&q=${query}`;
      break;
  }
  window.open(searchUrl, "_blank");
};
const iconSrc = computed(() => {
 const icons = {
  baidu: new URL('@/assets/icons/baidu.png', import.meta.url).href,
  google: new URL('@/assets/icons/guge.png', import.meta.url).href,
  bing: new URL('@/assets/icons/biying.png', import.meta.url).href,
  zhihu: new URL('@/assets/icons/zhihu.png', import.meta.url).href,
}
  return icons[selectedSearchType.value] || icons.baidu;
});
const placeholderText = computed(() => {
  const placeholders = {
    baidu: "百度一下，你就知道",
    google: "Google搜索",
    bing: "必应搜索",
    zhihu: "知乎文章搜索",
  }
  return placeholders[selectedSearchType.value] || placeholders.baidu;
});
const openApp = (url) => {
  window.open(url, '_blank');
};
onMounted(() => {
  fetchLinks();
  });
</script>

<style scoped>
/* 总体样式 */
.app-launcher {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--resources-text-color,#fff);
  padding-top: 20px;
}

/* 头部 */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.header h3 {
  font-size: 42px;
  font-weight: bold;
  color: var(--resources-text-color,#fff);
}

.search-bar {
  display: flex;
  width: 100%;
  margin-top: 20px;
  background-color: var(--resources-search-bg-color,#f7f9fa);
  color: var(--resources-text-color,#fff);
  border-radius: 20px;
  padding: 5px 15px;
}

.search-bar select {
  background-color: var(--resources-search-bg-color,#f7f9fa);
  color: var(--resources-text-color,#333);
  border: none;
  margin-left: 15px;
  padding: 5px 10px;
}

.search-bar select option {
  background-color: #3a3a3a;
  color: var(--resources-search-text-color,#fff);
}
.baidu-icon {
  width: 20px; /* 设置图标大小 */
  height: 20px;
  position: absolute;
  margin: 5px; /* 设置图标位置 */
}
.search-input {
  display: flex;
  align-items: center;
  flex-grow: 1;
  margin-left: 10px;
}

.search-bar input {
  width: 100%;
  height: 30px;
  background-color: var(--resources-search-bg-color,#f7f9fa);
  border: 1px solid var(--resources-search-border-color,#ccc);
  color: var(--resources-search-text-color,#333);
  font-size: 16px;
  padding: 0 5px;
}


.search-bar button {
  background: none;
  border: none;
  color: var(--resources-button-bg-color,#007afa);
  cursor: pointer;
  margin-left: 10px;
}
.search-bar button:hover {
  color: var(--resources-button-hover-bg-color,#0056b3);
}
.search-bar button i {
  font-size: 20px;
}

/* 分类栏样式 */
.category-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
}
.apps {
  width: 100%;
  max-width: 1200px; /* 限制最大宽度 */
  margin: 0 auto; /* 自动居中 */
}

/* 应用格子 */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin-top: 20px;
}

.app {
  width: 100%;
  height: 100px;
  background-color: var(--resources-bg-color,#fff);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.app:hover {
  transform: scale(1.05);
}

.app-info {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 10px;
}

.app-icon {
  width: 50px;
  height: 50px;
}

.app-icon img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  color: var(--resources-card-title-color, #3a3a3a);
}
.no-apps {
  text-align: center;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  color: #999;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header h3 {
    font-size: 32px;
  }
  .search-bar input {
    width: calc(100% - 40px);
  }
}

@media (max-width: 480px) {
  .app-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .app-icon {
    width: 40px;
    height: 40px;
  }
  .app-name {
    font-size: 14px;
  }
}
</style>
